<template>
  <div>
    <div class="pdf-viewer" v-if="show">
      <div class="pdf-bar">
        <div class="zoom-minus" @click="zoomMinus">
          <i class="el-icon-minus" title="缩小"></i>
        </div>
        <div class="scale">
          <el-input v-model.number="scale" size="mini" @blur="setScaleValue">
            <template slot="append">%</template>
          </el-input>
        </div>
        <div class="zoom-plus" @click="zoomPlus">
          <i class="el-icon-plus" title="放大"></i>
        </div>
        <div class="prev" @click="prePage">
          上一页
        </div>
        <div class="page">
          <el-input-number
            v-model.number="page"
            :min="0"
            :max="pageCount"
            size="mini"
          />
        </div>
        <div class="page-count">/ {{ pageCount }}</div>
        <div class="next" @click="nextPage">
          下一页
        </div>
      </div>
      <div class="pdf-wrapper" >
        <pdf
          :src="pdfUrl"
          :page="page"
          @num-pages="pageCount = $event"
          @page-loaded="currentPage = $event"
           @error="pdfError($event)"
          ref="pdf"
        ></pdf>
      </div>
    </div>
  </div>

  </template>
  <script>
  import pdf from 'vue-pdf'
  // pdf.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.6.347/pdf.worker.min.js"
  export default {
    components: { pdf },
    props: {
      src: String,
      startPage: {
        type: Number,
        default: 1
      }
    },
    data() {
      return {
        pdfUrl:null,
        page: 1,
        currentPage: 0,
        pageCount: 0,
        scale: 100,
        preScale: 100,
        show:false
      }
    },
    computed: {
      // pdfUrl() {
      //   if (!this.src) return ''
      //   console.log("this.src",this.src)
      //   let res = pdf.createLoadingTask(this.src)
      //   // console.log("进来没111")

      //   res.promise.then(pdf => {
      //       console.log('numPages', pdf)
      //     }).catch(err => {
      //       {
      //         console.log('加载失败', err)
      //       }
      //     })
      //     return res

      //   // console.log("res",res)
      //   // return res

      // }
    },
    // watch: {
    //   pageCount(value) {
    //     if (value) this.page = this.startPage
    //   }
    // },
    watch: {

      pageCount(value) {
        // 增加加载状态判断
        console.log("pageCount===》",value,this.$refs.pdf)
        this.$nextTick(() => {
          if (value &&this.$refs.pdf) {
          this.page = Math.min(this.startPage, value)
          }
        })

      }
    },
    mounted() {
      console.log(this.src)
      this.initSrc(this.src)
    },
    methods: {
      initSrc(value){
        console.log("src",value)
        if(value){
          console.log("src进来了",value)
          this.pdfUrl = pdf.createLoadingTask(value)
          console.log("进来了后pdfUrl==》",this.pdfUrl)
          this.pdfUrl.promise.then(pdf => {
            console.log('res.promise', pdf)
            this.show = true;
          }).catch(err => {
            {
              console.log('加载失败', err)
            }
          })
        }
        window.addEventListener('unhandledrejection', (event) => {
          console.error('未处理的异常:', event.reason);
        });

      },
      pdfError(e){
        console.log("pdfError",e)
      },
      setScaleValue(e) {
        // 输入的不是数字
        if (isNaN(e.target.value)) {
          this.scale = this.preScale
          return
        }
        if (e.target.value < 20) {
          this.scale = 20
        }
        if (e.target.value > 200) {
          this.scale = 200
        }
        this.preScale = this.scale
        this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
      },
      zoomMinus() {
        if (this.scale > 20) {
          this.scale += -5
          this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
        }
      },
      zoomPlus() {
        if (this.scale < 200) {
          this.scale += 5
          this.$refs.pdf.$el.style.width = parseInt(this.scale) + '%'
        }
      },
      prePage() {
        let count = this.currentPage - 1
        if (count < 1) return
        this.page = count
      },
      // nextPage() {
      //   console.log('this.pageCount', this.currentPage, this.pageCount)
      //   let count = this.currentPage + 1
      //   if (count > this.pageCount) return
      //   this.page = count
      // }

      nextPage() {
        console.log('this.pageCount', this.currentPage, this.pageCount)
        const targetPage = this.currentPage + 1
        if (targetPage <= this.pageCount && this.$refs.pdf) {
          this.page = targetPage
        }
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .pdf-viewer {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    .pdf-bar {
      position: absolute;
      top: 0px;
      left: 0px;
      z-index: 1;

      width: 100%;
      height: 50px;
      border: 1px solid #ddd;
      box-sizing: border-box;
      text-align: center;
      background: #f8f8f8;

      display: flex;
      justify-content: center;
      align-items: center;
      & > div {
        min-width: 36px;
        height: 36px;
        line-height: 36px;
        color: #666;
        cursor: pointer;
        i {
          width: 100%;
          height: 100%;
          color: #666;
          font-weight: bold;
        }
        ::v-deep .el-input--mini {
          input {
            padding: 0 8px;
            width: 50px;
            text-align: center;
          }
          .el-input-group__append {
            padding: 0 6px;
            color: #666;
            cursor: auto;
          }
        }
        ::v-deep .el-input-number {
          margin-left: 10px;
          width: 40px;
          .el-input-number__decrease {
            display: none;
          }
          .el-input-number__increase {
            display: none;
          }
          .el-input--mini {
            input {
              width: 40px;
              text-align: center;
            }
          }
        }
      }
      .prev {
        margin-left: 16px;
      }
      .scale,
      .page {
        display: flex;
        align-items: center;
      }
      .page-count {
        margin-right: 10px;
      }
    }
    .pdf-wrapper {
      position: absolute;
      margin-top: 50px;
      width: 100%;
      height: calc(100% - 50px);
      overflow: auto;
    }
  }
  </style>
